<template>
  <div>
    <div class="zi1">
      <span>物所超值,&nbsp;贴心售后,&nbsp;</span>
      <span style="color: orange">是你选择我们的理由</span>
      <img src="/src/ShouYe/sy1.jpg" alt="" />
    </div>
    <div class="floor1">
      <div class="zi2">
        <span style="color: #878787">About Us &nbsp;&nbsp;</span>
        <span style="font-weight: 800">关于我们</span>
        <p style="text-indent: 2em">
          山西诚至昊机电设备有限公司成立于2011年11月15日，主要从事炼钢厂用拆炉机的整车研发和销售、备品备件的供应、维修以及拆炉机的整体承包。服务于各大钢厂转炉冶炼作业、各种工业炉窑作业以及工业废渣清理、破碎作业等众多作业场所，作业效率高、作业质量好、一机多用，性能良好。
        </p>
        <p style="text-indent: 2em">
          山西诚至昊机电设备有限公司目前研发拆炉机基于德国特迈力进口车型，目前在售型号有CZH—CL10、CZH—CL12、CZH—CL14三个系列。提供国内各厂家的拆炉机备件供应及维修，自成立之日起，本着真诚服务客户、顾客至上的原则，客户遍及山西、山东、河北、河南、安徽、湖北、新疆、云南、江苏、四川等多个省份。
        </p>
        <img src="/src/ShouYe/sy2.png" alt="" />
      </div>
    </div>
    <div class="center">
      <div class="xuxian1">
        <div>
          <span style="font-size: 35px"><strong>产品中心</strong></span>
          <span style="font-size: 18pt; color: gray"
            ><strong></strong>PRODUCTS CENTER</span
          >
          <img src="@/assets/xuxian.png" />
        </div>
      </div>

      <div class="zi3">
        <span>拆炉机</span>
        <span>拆炉机备件</span>
        <span>拆炉机附件</span>
      </div>
      <div class="tupian">
        <div>
          <img src="/src/ShouYe/sy3.jpeg" />
          <span>拆炉机CL14</span>
        </div>
        <div>
          <img src="/src/ShouYe/sy4.jpeg" />
          <span>力士乐泵</span>
        </div>
        <div>
          <img src="/src/ShouYe/sy5.jpeg" />
          <span>仪表盘</span>
        </div>
        <div>
          <img src="/src/ShouYe/sy6.jpeg" />
          <span>力士乐阀</span>
        </div>
        <div>
          <img src="/src/ShouYe/sy7.jpeg" />
          <span>进口先导阀</span>
        </div>
        <div>
          <img src="/src/ShouYe/sy8.jpeg" />
          <span>控制总成</span>
        </div>
        <div>
          <img src="/src/ShouYe/sy9.jpeg" />
          <span>拆炉机CL12</span>
        </div>
        <div>
          <img src="/src/ShouYe/sy10.jpeg" />
          <span>拆炉机6</span>
        </div>
      </div>
      <div class="xuxian2">
        <div>
          <span style="font-size: 35px"><strong>精品工程</strong></span>
          <span style="font-size: 18pt; color: gray"
            ><strong></strong>PROJECT</span
          >
          <img src="@/assets/xuxian.png" />
        </div>
      </div>
      <div class="lunbo">
        <banner />
      </div>
      <div class="zi4">
        <div class="z1">
          <div>
            <img src="/src/ShouYe/lantiao.png" alt="" />
            <h2>新闻资讯</h2>
            <span>查看更多</span>
          </div>
          <ul>
            <li>
              <span>
                <img
                  src="/src/ShouYe/lvdian.jpg"
                  alt=""
                />拆炉机行走传动装置总成配件...</span
              >
              <span @click="goto(1)" class="cha">【查看更多】</span>
            </li>
            <li>
              <span>
                <img
                  src="/src/ShouYe/lvdian.jpg"
                  alt=""
                />在操作拆炉机高频破碎锤时需...</span
              >
              <span class="cha">【查看更多】</span>
            </li>
            <li>
              <span>
                <img
                  src="/src/ShouYe/lvdian.jpg"
                  alt=""
                />拆炉机麻花钻钻头的结构会对...</span
              >
              <span class="cha">【查看更多】</span>
            </li>
            <li>
              <span>
                <img
                  src="/src/ShouYe/lvdian.jpg"
                  alt=""
                />在冬季使用拆炉机钻杆时需注...</span
              >
              <span class="cha">【查看更多】</span>
            </li>
            <li>
              <span>
                <img src="/src/ShouYe/lvdian.jpg" alt="" />拆炉机结构介绍</span
              >
              <span style="margin-left: 167px">【查看更多】</span>
            </li>
            <li>
              <span>
                <img
                  src="/src/ShouYe/lvdian.jpg"
                  alt=""
                />拆炉机******操作规范</span
              >
              <span style="margin-left: 123px">【查看更多】</span>
            </li>
          </ul>
        </div>
        <div class="z1">
          <div>
            <img src="/src/ShouYe/lantiao.png" alt="" />
            <h2>常见问题</h2>
            <span>查看更多</span>
          </div>
          <ul>
            <li>
              <span>
                <img
                  src="/src/ShouYe/lvdian.jpg"
                  alt=""
                />拆炉机发动机水温过高的原因...</span
              >
              <span class="cha">【查看更多】</span>
            </li>
            <li>
              <span>
                <img
                  src="/src/ShouYe/lvdian.jpg"
                  alt=""
                />在操作拆炉机行走时需注意什么...</span
              >
              <span style="margin-left: 45px">【查看更多】</span>
            </li>
            <li>
              <span>
                <img
                  src="/src/ShouYe/lvdian.jpg"
                  alt=""
                />拆炉机液压油是如何安装的?</span
              >
              <span style="margin-left: 81px">【查看更多】</span>
            </li>
            <li>
              <span>
                <img
                  src="/src/ShouYe/lvdian.jpg"
                  alt=""
                />扩孔钻结构设计上有何要求?</span
              >
              <span style="margin-left: 81px">【查看更多】</span>
            </li>
            <li>
              <span>
                <img
                  src="/src/ShouYe/lvdian.jpg"
                  alt=""
                />如何使用和保养微型钻头</span
              >
              <span style="margin-left: 105px">【查看更多】</span>
            </li>
            <li>
              <span>
                <img
                  src="/src/ShouYe/lvdian.jpg"
                  alt=""
                />拆炉机钎杆使用的注意事项</span
              >
              <span style="margin-left: 90px">【查看更多】</span>
            </li>
          </ul>
        </div>
        <div class="z1">
          <div>
            <img src="/src/ShouYe/lantiao.png" alt="" />
            <h2>联系我们</h2>
            <span>查看更多</span>
          </div>

          <ul style="margin-left: 25px">
            <li>办公室：0351-3030390</li>
            <li>总经理：李毛毛 电话：13753139731</li>
            <li>邮箱：lmm20061325@sohu.com</li>
            <li>地址：山西省太原市万柏林区中涧河乡耿家庄南1-1</li>
          </ul>
        </div>
      </div>
      <div class="tutu">
        <img src="/src/ShouYe/sy11.jpg" />
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "@/components/Banner.vue";
export default {
  components: { Banner },
  methods: {
    goto(lid) {
      // 利用 ? 方案, 传递路由参数
      this.$router.push("/Details?lid=" + lid);
      console.log(this.$router);
    },
  },
};
</script>

<style lang="scss" scoped>
.zi1 {
  font-size: 24pt;
  text-align: center;
  margin-top: 50px;
  font-weight: 800;
  img {
    width: 1200px;
    margin: 50px auto;
  }
}
.floor1 {
  width: 100%;
  height: 450px;
  background-color: #f4f4f4;
  position: relative;
}
.zi2 {
  font-size: 24pt;
  margin: 40px 0px;
  position: absolute;
  margin-left: 350px;
  p {
    width: 850px;
    font-size: 20px;
    font-weight: 300;
    margin-top: 20px;
  }
  img {
    width: 350px;
    position: relative;
    left: 850px;
    top: -225px;
  }
}
.center {
  width: 1300px;
  margin: 0 auto;
  overflow: hidden;
}
.xuxian1 {
  margin-top: 50px;
  display: flex;
}
.xuxian1 > div {
  margin: 0 auto;
  white-space: nowrap//强制同一行内显示所有文本文字，让所有文字内容中一排显示不换行。;
}
.xuxian1 > div > img {
  display: inline-block;
}
.xuxian1 > div > span {
  margin: 10px;
}
.xuxian2 {
  margin-top: 50px;
}
.xuxian2 > div {
  white-space: nowrap//强制同一行内显示所有文本文字，让所有文字内容中一排显示不换行。;
}
.xuxian2 > div > img {
  display: inline-block;
}
.xuxian2 > div > span {
  margin: 10px;
}
.zi3 {
  font-size: 25px;
  display: flex;
  margin: 30px 0px 20px 10px;
  cursor: pointer;
  user-select: none;
  span {
    height: 60px;
    width: 180px;
    background-color: #1e61ba;
    margin: 10px;
    text-align: center;
    line-height: 60px;
    color: #f4f4f4;
  }
}
.tupian {
  width: 1300px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  justify-content: space-evenly;
  div {
    width: 300px;
  }
  img {
    width: 100%;
  }
  span {
    display: inline-block;
    margin: 10px;
    user-select: none;
  }
  span:hover {
    color: rgb(65, 65, 241);
  }
}
.zi4 {
  display: flex;
}
.zi4 .z1 div {
  display: flex;
}
.zi4 .z1 div h2 {
  margin-left: 10px;
}
.zi4 .z1 div span {
  margin-left: 188px;
  line-height: 31px;
}
.zi4 .z1 div img {
  margin-left: 35px;
  width: 8px;
  height: 31px;
  position: relative;
  top: -1px;
}
.zi4 .z1 ul li {
  margin: 33px 12px;
}
.zi4 .z1 img {
  margin-right: 10px;
  width: 5px;
  height: 5px;
  display: inline-block;
  margin-left: 25px;
  position: relative;
  top: -2.8px;
}
.cha {
  margin-left: 60px;
}
.zi {
  display: flex;
}
.tu {
  display: flex;
  width: 200px;
  height: 50px;
  position: relative;
  left: -500px;
}
.tutu {
  width: 350px;

  float: right;
  position: relative;
  top: -140px;
  right: 30px;
}
</style>
